import { Component, Prop } from 'vue-facing-decorator'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { getFeeList, removeFee } from '@/api/insureEnsurePlan'
import type { AddFeeLevelDto, InsureEnsurePlanDto, InsureEnsurePlanListDto } from '@/api/insureEnsurePlan/types'
import { CalculateDayTypeCnEnum, InsureEnsureRecordStatusCnEnum, InsureEnsureStatusCnEnum } from '@/const/enum'
import AddInsurancePricePop from './AddInsurancePricePop'
import type { AddType } from '@/api/types'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'

@Component
export class PremiumRecordsView extends TableRender {
    @Prop() detailData!: InsureEnsurePlanListDto
 
    showPop = false
    curData = {} as InsureEnsurePlanDto
    addType = 'edit' as AddType

    noTablePadding = true
    noFilterPadding = true
    filterConfig() {
        return {
            yearMonth : {
                name: '保费月份',
                element: 'datetime',
                placeholder: '请选择',
                params: {
                    type: 'month',
                    valueFormat: 'YYYY-MM'
                }
            },
        }
    }
	
    tableColumnConfigOld = () => [
        {
            field: 'operate',
            title: '操作',
            width: 120,
            fixed: 'left',
            params: {
                buttons: [
                    {
                        text: '编辑',
                        hidden: (row) => row.status === InsureEnsureRecordStatusCnEnum.已过期,
                        permission: 'client:insureEnsureFeeRecord:edit',
                        event: (row) => {
                            this.onEdit(row)
                        }
                    },
                    {
                        text: '删除',
                        hidden: (row) => row.status === InsureEnsureRecordStatusCnEnum.已过期 || row.status === InsureEnsureRecordStatusCnEnum.生效中,
                        permission: 'client:insureEnsureFeeRecord:delete',
                        type: 'danger',
                        event: (row) => {
                            this.onRemove(row)
                        }
                    }
                ]
            },
            slots: {
                default: 'buttons'
            }
        },
        {
            field: '',
            title: '生效日期',
            formatter: ({row}) => {
                return dayjs(row.feeStartTime).format('YYYY-MM-DD') + ' ~ ' + (row.feeEndTime ? dayjs(row.feeEndTime).format('YYYY-MM-DD') : '长期有效')
            }
        },
        {
            field: 'calculateType',
            title: '计算方式',
            formatter: ({row}) => {
                return CalculateDayTypeCnEnum[row.calculateType]
            },
        },
        {
            field: 'monthFee3',
            title: '1-3类成本保费',
            width: 120,
            slots: {
                header: () => {
                    return <div class="text-center">
                        <div>1-3类成本保费</div>
                        <div>月保费</div>
                    </div>
                }
            }
        },
        {
            field: 'dailyFee3',
            title: '1-3类保费',
            slots: {
                header: () => {
                    return <div class="text-center">
                        <div>1-3类保费</div>
                        <div>日保费</div>
                    </div>
                }
            }
        },
        {
            field: 'monthFee4',
            title: '4类成本保费',
            width: 120,
            slots: {
                header: () => {
                    return <div class="text-center">
                        <div>4类成本保费</div>
                        <div>月保费</div>
                    </div>
                }
            }
        },
        {
            field: 'dailyFee4',
            title: '4类保费',
            slots: {
                header: () => {
                    return <div class="text-center">
                        <div>4类保费</div>
                        <div>日保费</div>
                    </div>
                }
            }
        },
        {
            field: 'monthFee5',
            title: '5类成本保费',
            width: 120,
            slots: {
                header: () => {
                    return <div class="text-center">
                        <div>5类成本保费</div>
                        <div>月保费</div>
                    </div>
                }
            }
        },
        {
            field: 'dailyFee5',
            title: '5类保费',
            slots: {
                header: () => {
                    return <div class="text-center">
                        <div>5类保费</div>
                        <div>日保费</div>
                    </div>
                }
            }
        },
        {
            field: 'monthFee6',
            title: '6类成本保费',
            width: 120,
            slots: {
                header: () => {
                    return <div class="text-center">
                        <div>6类成本保费</div>
                        <div>月保费</div>
                    </div>
                }
            }
        },
        {
            field: 'dailyFee6',
            title: '6类保费',
            slots: {
                header: () => {
                    return <div class="text-center">
                        <div>6类保费</div>
                        <div>日保费</div>
                    </div>
                }
            }
        },
        {
            field: 'status',
            title: '状态',
            params: {
                tags: {
                    0: 'processing',
                    1: 'success',
                    2: 'error'
                },
            },
            formatter: ({row}) => {
                return InsureEnsureRecordStatusCnEnum[row.status as number]
            },
            slots: {
                default: 'colorTag'
            }
        },
    ] as TableRenderColumnTypes<InsureEnsurePlanDto>


    onEdit(row: InsureEnsurePlanDto) {
        this.showPop = true
        this.curData = row
    }

    async onRemove(row: InsureEnsurePlanDto) {
        await removeFee({
            id: row.id as number,
            feeId: row.feeId as number
        })
        message.success('删除成功')
        this.reloadPage()
    }

    async onLoadData(page: number, size: number, filters: AnyObject) {
        if(!this.detailData.id) return []
        return (await getFeeList({
            pageNum: page,
            pageSize: size,
            planId: this.detailData.id,
            ...filters
        })).list.map(i => {
            const ensureFeeData = {} as Record<string, number>
            // 整理保费，供table显示
            i.ensureFee?.forEach(i => {
                ensureFeeData[`dailyFee${i.dangerLevel}`] = i.dailyFee ?? ''
                ensureFeeData[`monthFee${i.dangerLevel}`] = i.monthFee ?? ''
            })
            return {
                ...i,
                ...ensureFeeData
            }
        })
    }

    render() {
        return <>
            {super.render()}
            <AddInsurancePricePop v-model:show={this.showPop} detailData={this.curData} type={this.addType} insureCompanyPlanId={this.detailData.insureCompanyPlanId} onRefresh={this.reloadPage}/>
        </>
    }
}

export default toNative<{
    detailData: InsureEnsurePlanListDto
}, {}>(PremiumRecordsView)